<template>
  <div class="form-line">
    <je-form
      :model="properties"
      :label-col="labelCol"
      size="small"
      :wrapper-col="wrapperCol"
      :colon="false"
      autocomplete="off"
    >
      <je-collapse v-model:activeKey="activeKey" expand-icon-position="right">
        <je-collapse-panel key="1" :header="$t('formLine.baseConfiguration')">
          <je-form-item :label="$t('formLine.label')" name="name">
            <je-input v-model:value.trim="properties.name" allow-clear @change="onNameChange" />
          </je-form-item>
          <je-form-item name="conditionExpression">
            <template #label>
              <i class="conditionicon fas fa-question-circle" @click="clickIcon" />
              <i
                class="jeicon jeicon-table"
                style="font-size: 14px; margin-right: 4px;cursor: pointer;}"
                @click="showFuncModel"
              ></i>
              {{ $t('formLine.info') }}
            </template>
            <je-textarea v-model:value="properties.conditionExpression" allow-clear :rows="4" />
          </je-form-item>
        </je-collapse-panel>
        <je-collapse-panel key="2" :header="$t('formLine.styleConfiguration')">
          <je-form-item :label="$t('formLine.dashed')" name="dashed">
            <je-switch v-model:value="styleConfig.dashed" mode="checkbox" />
            <span class="prompt">{{ $t('formLine.dashedContext') }}</span>
          </je-form-item>
          <je-form-item :label="$t('formLine.strokeColor')" name="strokeColor">
            <je-color v-model:value="styleConfig.strokeColor" />
          </je-form-item>
          <je-form-item :label="$t('formLine.fontSize')" name="fontSize">
            <je-input-number
              v-model:value="styleConfig.fontSize"
              :min="1"
              style="width: 100%"
              allow-clear
              @change="changeLineStyle('fontSize')"
            />
          </je-form-item>
          <je-form-item :label="$t('formLine.fontFamily')" name="fontFamily">
            <je-Select
              v-model:value="styleConfig.fontFamily"
              allow-clear
              :options="JE_FORMLINE_FONTFAMILYOPTIONS"
              @change="changeLineStyle('fontFamily')"
            />
          </je-form-item>
          <je-form-item :label="$t('formLine.fontColor')" name="fontColor">
            <je-color v-model:value="styleConfig.fontColor" />
          </je-form-item>
        </je-collapse-panel>
      </je-collapse>
    </je-form>
    <Explain
      v-if="explainType"
      modal-context="条件：是用于流程判断条件业务流转使用，条件支持Juel表达式，可使用系统字段过滤条件。
        例如：筛选成年用户 ：${ 字段编码 >= 18 }
        例如：筛选当前登录人录入的数据：${ 字段编码 =='admin' }"
      width="500px"
      @closEexplain="closEexplain"
    />
  </div>
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { Collapse, Form, Input, Color, InputNumber, Select, Switch } from '@jecloud/ui';
  import { JE_FORMLINE_FONTFAMILYOPTIONS } from '@/helper/constant';
  import { SelectWindow } from '@jecloud/func';
  import { isEmpty } from '@jecloud/utils';
  import Explain from '@/components/explain/index.vue';

  export default defineComponent({
    name: 'FormLine',
    components: {
      JeCollapse: Collapse,
      JeCollapsePanel: Collapse.Panel,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeTextarea: Input.TextArea,
      JeColor: Color,
      JeInputNumber: InputNumber,
      JeSelect: Select,
      JeSwitch: Switch,
      Explain,
    },
    props: {
      jebpmData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      nodeData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      wfEditor: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    setup(props) {
      //表单数据
      const properties = ref(props.nodeData.properties);
      const styleConfig = ref(props.nodeData.styleConfig);
      //默认激活的面板
      const activeKey = ref(['1', '2']);

      //弹出功能面板
      const showFuncModel = () => {
        if (isEmpty(props.jebpmData.properties.processBasicConfig.funcName)) {
          return false;
        }
        SelectWindow.show({
          title: props.jebpmData.properties.processBasicConfig.funcName + '字段',
          type: 'grid',
          width: 895,
          height: 600,
          showButton: false,
          configInfo: 'JE_CORE_RESOURCECOLUMN,,,S',
          querys: [
            {
              code: 'RESOURCECOLUMN_FUNCINFO_ID',
              type: '=',
              value: props.jebpmData.properties.processBasicConfig.funcId,
              cn: 'and',
            },
          ],
        });
      };

      //名称字段change事件
      const onNameChange = () => {
        props.wfEditor.updateNodeLabel({ label: properties.value.name });
      };

      //修改连线的样式
      const changeLineStyle = (type) => {
        const value = styleConfig.value[type];
        props.wfEditor.updateLineStyle({ type, value });
      };

      watch(
        () => styleConfig.value.dashed,
        (newVal) => {
          const value = newVal == '1' ? 1 : 0;
          const type = 'dashed';
          props.wfEditor.updateLineStyle({ type, value });
        },
      );

      watch(
        () => styleConfig.value.strokeColor,
        (newValue) => {
          props.wfEditor.updateLineStyle({ type: 'strokeColor', value: newValue });
        },
      );

      watch(
        () => styleConfig.value.fontColor,
        (newValue) => {
          props.wfEditor.updateLineStyle({ type: 'fontColor', value: newValue });
        },
      );

      watch(
        () => props.nodeData.resourceId,
        () => {
          properties.value = props.nodeData.properties;
          styleConfig.value = props.nodeData.styleConfig;
        },
      );

      //点击icon
      const explainType = ref(false);
      const clickIcon = () => {
        explainType.value = true;
      };

      //弹窗关闭回调
      const closEexplain = () => {
        explainType.value = false;
      };

      return {
        activeKey,
        properties,
        styleConfig,
        labelCol: {
          span: 5,
        },
        wrapperCol: {
          span: 19,
        },
        JE_FORMLINE_FONTFAMILYOPTIONS,
        showFuncModel,
        onNameChange,
        changeLineStyle,
        clickIcon,
        explainType,
        closEexplain,
      };
    },
  });
</script>
